<template>
	<view class="install-container" style="margin-bottom: 30rpx;">

		<!-- 用户信息 -->
		<!-- 如果需要使用 validateFunction 自定义校验规则,则不能采用 uni-forms 的 rules 属性来配置校验规则，
		这时候需要通过ref，在onReady生命周期调用组件的setRules方法绑定验证规则 -->
		<uni-forms :value="params" ref="form" validateTrigger="bind" class="word5">
			<uni-forms-item required label="请假开始时间：" name="开始时间">
				<view :class="{'color': value == '请选择请假开始时间'}" class="cell-detail" @click="selectDatePicker">
					{{value}}
				</view>
				<date-time-picker ref='date-time' :indicatorStyle='indicatorStyle' :type='type' :datestring='dateString' @change='dateTimeChange'></date-time-picker>
			</uni-forms-item>
			<uni-forms-item required label="请假结束时间：" name="结束时间">
				<view :class="{'color': value1 == '请选择请假结束时间'}" class="cell-detail" @click="selectDatePicker1">
					{{value1}}
				</view>
				<date-time-picker ref='date-time1' :indicatorStyle='indicatorStyle' :type='type' :datestring='dateString' @change='dateTimeChange1'></date-time-picker>
			</uni-forms-item>
			<button class="leave-btn" @click="submitForm">提交</button>
		</uni-forms>

	</view>
</template>

<script>
	import DateTimePicker from '@/components/bory-dateTimePicker/bory-dateTimePicker.vue'
	import dayjs from 'dayjs'
	export default {
		components: {
			DateTimePicker
		},
		data() {
			return {
				value: '请选择请假开始时间',
				value1: '请选择请假结束时间',
				type: 'datetime',
				params: {},
				//表单验证规则
				rules: {
					开始时间: {
						rules: [{
							validateFunction: (rule, value, data, callback) => {
								if (this.params.开始时间) {									
									// 通过返回 resolve
									callback()
								} else {
									// 不通过返回 reject(new Error('错误信息'))
									callback('请选择请假开始时间')
								}
							}
						}]
					},
					结束时间: {
						rules: [{
							validateFunction: (rule, value, data, callback) => {
								if (this.params.结束时间) {									
									// 通过返回 resolve
									callback()
								} else {
									// 不通过返回 reject(new Error('错误信息'))
									callback('请选择请假结束时间')
								}
							}
						}]
					}
				}
			}
		},
		onReady() {
			// 需要在onReady中设置规则
			this.$refs.form.setRules(this.rules)
		},
		onLoad(options) {
			this.params = JSON.parse(options.item)
			// console.log(options)
			// this.params.检查点名称 = options.name
		},
		onShow() {

		},
		methods: {
			binddata(name,value){
			   // 通过 input 事件设置表单指定 name 的值
			   this.$refs.form.setValue(name, value)
			},
			selectDatePicker() {
				this.$refs['date-time'].show();
			},
			selectDatePicker1() {
				this.$refs['date-time1'].show();
			},
			dateTimeChange(value) {
				this.value = value;
				this.params.开始时间 = dayjs(value).format("YYYY-MM-DDTHH:mm:ssZ")
				this.binddata('开始时间', value)
			},
			dateTimeChange1(value) {
				this.value1 = value;
				this.params.结束时间 = dayjs(value).format("YYYY-MM-DDTHH:mm:ssZ")
				this.binddata('结束时间', value)
			},
			submitForm(form) {
				// 手动提交表单
				this.$refs.form.submit().then(res => {
					if((new Date(this.value1).getTime() - new Date(this.value).getTime()) < 0) {
						uni.showToast({
							title: '结束时间不得小于开始时间',
							icon: 'none'
						})
						return
					}
					this.params.工作状态 = 3
					this.params.所有负责项目 = this.params.所有负责项目.split()
					this.params.负责工单类型 = this.params.负责工单类型.map(item => this.$type.ticketTypeObj[item])
					console.log('表单数据信息：', res);
					console.log(this.params)
					this.askLeave()
					// this.addPartition(res)
				}).catch(err => {
					console.log('表单错误信息：', err);
					uni.showToast({
						icon: 'none',
						title: "表单字段填写错误，请检查"
					})
				})
			},
			askLeave() {
				uni.showLoading({
					mask: true
				})
				this.$http2.post('ticketSystem/operator/update', this.params).then(res => {
					console.log(res)
					if (res.code === 10000) {
						// uni.navigateBack({
						// 	delta: 1
						// })
						uni.showToast({
							title: '请假成功',
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.install-container {
		height: 100vh;
		background-color: #F5F5F5;
	}

	.leave-btn {
		margin-top: 240rpx;
		width: 568rpx;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		color: #fff;
		background: #1152FC;
		border-radius: 8rpx;

	}
	.color {
		color: #808080;
	}

	.tap {
		display: flex;
		align-items: center;
	}
</style>
